<template>
	<a-modal v-bind="option" width="500px">
		<a-form :model="addSupplementformData" ref="formRef" :rules="rules">
			<a-form-item label="补充合同模板" name="econtractTemplateId">
				<a-select v-model:value="addSupplementformData.econtractTemplateId" :field-names="{label: 'contractTemplateName', value: 'id'}" placeholder="请选择" :options="templateList" @change="handleChange"></a-select>
			</a-form-item>
			<a-form-item label="合同编号" name="supplementNo">
				<a-input v-model:value="addSupplementformData.supplementNo" placeholder="请输入" />
			</a-form-item>
			<a-form-item label="合同周期" name="rangeTime">
				<a-range-picker format="YYYY-MM-DD" v-model:value="addSupplementformData.rangeTime" :placeholder="['合同开始时间', '合同结束时间']" />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button @click="option.onCancel">取消</a-button>
			<a-button type="primary" :loading="loading" @click="submit">确定</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
	import {ref, reactive, toRef, onMounted} from 'vue'
	import {getContractTemplate, combineSignatureSupplement} from '@/api/contract'
	import dayjs from 'dayjs'
	import {message} from 'ant-design-vue'
	import DATE_FORMAT from 'yuxin-base/src/utils/date'

	const emits = defineEmits(['update:visible', 'success'])
	const loading = ref(false)
	const formRef = ref()
	const addSupplementformData: any = reactive({
		econtractTemplateId: null,
		supplementNo: null,
		rangeTime: null,
		beginTime: '',
		endTime: '',
		contractId: null,
		authType:null,
	})
	const props = defineProps<{
		visible: boolean
		dataSource: any
	}>()
	const templateList = ref([])

	const option = reactive({
		width: 500,
		title: '新增补充合同',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
		}
	})

	const rules = {
		econtractTemplateId: [{required: true, message: '请选择合同模板', trigger: 'change'}],
		supplementNo: [
			{required: true, message: '请输入合同编号', trigger: 'blur'},
			{max: 20, message: '请输入20字以内字母+数字组合', trigger: 'blur'},
			{pattern: /^[a-z0-9]+$/i, message: '请输入20字以内字母+数字组合', trigger: 'blur'}
		],
		rangeTime: [{required: true, message: '请选择合同模板', trigger: 'change'}]
	}
	const handleChange = (value,options) => {
		addSupplementformData.authType = options.authType
	}
	const submit = () => {
			console.log(props.dataSource,'props.dataSource');

		formRef.value?.validate().then(() => {
			if (null === addSupplementformData.rangeTime) addSupplementformData.rangeTime = []
			addSupplementformData.beginTime = dayjs(addSupplementformData.rangeTime[0]).startOf('day').format(DATE_FORMAT.DATETIME)
			addSupplementformData.endTime = dayjs(addSupplementformData.rangeTime[1]).endOf('day').format(DATE_FORMAT.DATETIME)
			addSupplementformData.contractId = props.dataSource.id
			loading.value = true

			combineSignatureSupplement({...addSupplementformData,authType:addSupplementformData.authType || 1})
				.then(res => {
					message.success('操作成功')
					loading.value = false
					formRef.value?.resetFields()
					emits('success')
					emits('update:visible', false)
				})
				.finally(() => {
					loading.value = false
				})
		})
	}

	onMounted(() => {
		// templateType 1 合同 2 补充合同
		getContractTemplate({
			// like: props.dataSource.houseAddress,
			// deptId: props.dataSource.signDeptId,
			deptId: props.dataSource.house.deptId,
			templateType: 2
		}).then(res => {
			// 筛选出补充合同模板
			templateList.value = res.data.filter(i => 2 === i.templateType)
		})
	})
</script>

<style lang="less" scoped></style>
